import { SVG } from "@libs/svg.js-3.2.0/build/svg.esm.js";
import svgRawContent from "./crane.svg?raw";


window.addEventListener("load", () => {
    const draw = SVG().addTo('#drawing').viewbox(0, 0, 1700, 1200);
    draw.width(1000);
    draw.svg(svgRawContent);

    const elements = {

        // 岸桥轨道车
        railcar_primary: draw.find('#MtPosMovement')[0],
        railcar_secondary: draw.find('#PtPosMovement')[0],

        // 岸桥轨道车抓斗连接线 
        railcar_primary_ropes: draw.find('#MhRope')[0],
        railcar_secondary_ropes: draw.find('#ThRope')[0],

        // 岸桥轨道车抓斗
        railcar_primary_trolley: draw.find('#MhPosMovement')[0],
        railcar_secondary_trolley: draw.find('#PhPosMovement')[0],

        // 岸桥轨道车抓斗集装箱
        railcar_primary_container: draw.find('#MainSprLock')[0],
        railcar_secondary_container: draw.find('#PortalSprLock')[0],

        // 岸桥平台集装箱
        platform_container_waterside: draw.find('#WtsPad')[0],
        platform_container_landside: draw.find('#LdsPad')[0],
    };

    const positions = {
        // 主小车轨道
        rail_primary_minX: 100,
        rail_primary_maxX: 1400,
        rail_primary_Y: 275,

        // 副小车轨道
        rail_secondary_minX: 1280,
        rail_secondary_maxX: 1530,
        rail_secondary_Y: 692,

        // 线长
        rope_primary_min: 30,
        rope_primary_max: 300,
        rope_primary_defaultY: 375,

        trolley_primary_defaultX: 1450,
        trolley_primary_defaultY: 370,


    }

    // 打印一下默认位置
    console.log(
        elements.railcar_primary_trolley.x(),
        elements.railcar_primary_trolley.y()
    )

    // 显示与隐藏
    // const setElementVisiblity = (element, visiable) => {
    //     if (visiable) element.show();
    //     else element.hide();
    // }

    // 移动位置
    // elements.railcar_secondary.move(1280, 692);

    const realTimePosition = {
        x: 1400,
        y: 0,
    }

    const updatePosition = () => {

        // 主

        // 轨道移动
        elements.railcar_primary.move(realTimePosition.x, positions.rail_primary_Y);

        // 绳子缩放
        const ropes = elements.railcar_primary_ropes.children();
        for (let i = 0; i < ropes.length; i++) {
            const line = ropes[i];
            line.attr({ y2: positions.rope_primary_defaultY + realTimePosition.y });
        }

        // 抓斗移动
        elements.railcar_primary_trolley.move(
            realTimePosition.x + 37,
            positions.trolley_primary_defaultY + realTimePosition.y,
        )

    }

    window.addEventListener("keydown", (event) => {
        if (event.code === "KeyA") {
            realTimePosition.x -= 100;
            realTimePosition.y += 40;
            updatePosition();
        }
        if (event.code === "KeyD") {
            realTimePosition.x += 100;
            realTimePosition.y -= 40;
            updatePosition();
        }
    })

})